<template>
  <div class="app-container">
    <el-card class="box-card">
      <header>
        <div class="flex">
          <el-select
            v-model="form.cate1_id"
            placeholder="请选择靓号类别"
            style="width: 17%"
            @change="parentChange"
          >
            <el-option
              v-for="item in parentList"
              :label="item.title"
              :key="item.id"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-input
            v-model="form.nickname"
            class="ml-4"
            style="width: 17%"
            placeholder="用户昵称"
          ></el-input>
          <el-input
            v-model="form.user_code"
            class="ml-4"
            style="width: 17%"
            placeholder="用户原ID"
          ></el-input>
          <el-input
            v-model="form.price"
            class="ml-4"
            style="width: 17%"
            placeholder="价格"
          ></el-input>
        </div>
        <div class="flex mt-3 mb-3">
          <el-select
            v-model="form.cate2_id"
            placeholder="请选择二级类别"
            style="width: 17%"
          >
            <el-option
              v-for="item in liangChildList"
              :label="item.title"
              :key="item.id"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-date-picker
            style="width: 17%"
            class="ml-4"
            v-model="form.buy_date"
            type="date"
            placeholder="购买时间"
          ></el-date-picker>
          <el-date-picker
            class="ml-4"
            style="width: 17%"
            v-model="form.expire_date"
            type="datetime"
            placeholder="到期时间"
          ></el-date-picker>
          <el-input
            v-model="form.good_code"
            placeholder="靓号"
            class="ml-4"
            style="width: 17%"
          ></el-input>
          <div class="ml-4 flex items-center" style="width: 17%">
            <i
              @click="getTableData"
              class="el-icon-search p-1 text-white text-2xl bg-green-500 cursor-pointer"
            ></i>
            <i
              @click="resetClick"
              class="el-icon-refresh p-1 ml-3 text-white text-2xl bg-red-500 cursor-pointer"
            ></i>
          </div>
        </div>

        <el-table
          v-loading="loading"
          :data="tableData"
          border
          @sort-change="sortClick"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="id" label="序号" width="80"></el-table-column>
          <el-table-column prop="user_code" label="用户原ID"></el-table-column>
          <el-table-column
            prop="user_nickname"
            label="用户昵称"
          ></el-table-column>
          <el-table-column prop="good_code" label="靓号"></el-table-column>
          <el-table-column prop="cate1_name" label="靓号类别"></el-table-column>
          <el-table-column prop="cate2_name" label="二级分类"></el-table-column>
          <el-table-column
            prop="good_code_price"
            label="靓号价格"
          ></el-table-column>
          <el-table-column
            prop="add_time"
            sortable
            sortable="custom"
            label="购买时间"
          ></el-table-column>
          <el-table-column
            prop="expired_time"
            sortable
            sortable="custom"
            label="到期时间"
          ></el-table-column>
        </el-table>
        <TMPagination
          :current-page.sync="pageList.page"
          :total.sync="pageList.total"
          :page-size.sync="pageList.page_size"
          @updateTable="getTableData"
        />
      </header>
    </el-card>
  </div>
</template>

<script>
import {
  vanityNumberPurchaseRecordList,
  categoryDropDownBox
} from "../../../../api/personalizedMall/goodNumberRecord";

import TMPagination from "../../wishList/childComps/TMPagination/TMPagination";

export default {
  name: "goodNumberRecord",
  components: { TMPagination },
  data() {
    return {
      form: {
        cate1_id: null, // 父分类id，0：不限制，其它的根据接口
        cate2_id: null, // 子分类id，0：不限制，其它的根据接口
        good_code: null, // 靓号
        buy_date: null, // 购买日期，yyyy-mm-dd
        expire_date: null, // 过期日期，yyyy-mm-dd
        user_code: null, // 用户ID
        nickname: null, // 用户昵称
        price: null // 价格
      },
      parentList: [], // 靓号的下拉框的数据信息
      liangChildList: [], // 二级分类的下拉框的数据
      pageList: {
        page: 1,
        page_size: 10,
        total: 10
      },
      loading: false,
      tableData: [],
      order: {
        addTimeOrder: null,
        expireTime: null
      }
    };
  },
  created() {
    this.getDownList();
    this.getTableData();
  },
  methods: {
    /**
     * resetClick
     * @desc 重置按钮 点击事件
     */
    resetClick() {
      for (const argumentsKey in this.form) {
        this.form[argumentsKey] = null;
      }
      this.pageList = {
        page: 1,
        page_size: 10,
        total: null
      };
      this.getTableData();
    },
    sortClick(obj) {
      console.log(obj);
      if (obj.prop === "add_time" && obj.order) {
        this.order.addTimeOrder = obj.order === "ascending" ? 0 : 1;
      } else this.order.addTimeOrder = null;

      if (obj.prop === "expired_time" && obj.order) {
        this.order.expireTime = obj.order === "ascending" ? 0 : 1;
      } else this.order.expireTime = null;

      console.log(this.order);
      this.getTableData();
    },
    // 网络请求
    /**
     * getDownList
     * @desc 获取下拉框的数据
     */
    async getDownList() {
      const detail = await categoryDropDownBox();
      if (detail.code === 200) {
        detail.data.map(item => this.parentList.push(item));
      }
    },
    /**
     * getTableData
     * @desc 获取表格数据
     */
    async getTableData() {
      // 默认值
      let form = {
        cate1_id: 0, // 父分类id，0：不限制，其它的根据接口
        cate2_id: 0, // 子分类id，0：不限制，其它的根据接口
        good_code: null, // 靓号
        buy_date: null, // 购买日期，yyyy-mm-dd
        expire_date: null, // 过期日期，yyyy-mm-dd
        user_code: null, // 用户ID
        nickname: null, // 用户昵称
        price: null, // 价格
        order_expire_time: this.order.expireTime,
        order_add_time: this.order.addTimeOrder
      };
      for (const formKey in this.form) {
        if (
          !(
            !this.form[formKey] &&
            typeof this.form[formKey] != "undefined" &&
            this.form[formKey] !== 0
          ) &&
          this.form[formKey]
        ) {
          form[formKey] = this.form[formKey];
        }
      }
      this.loading = true;
      const detail = await vanityNumberPurchaseRecordList(form, {
        page_size: this.pageList.page_size,
        page: this.pageList.page
      });
      if (detail.code === 200) {
        this.tableData = detail.data.data;
        this.pageList.page = detail.data.current_page;
        this.pageList.total = detail.data.total;
        this.pageList.page_size = detail.data.per_page * 1;
        this.loading = false;
      }
    },
    // 数据改变
    /**
     * parentChange
     * @desc 当靓号类别的数据发生改变时, 改变二级列别的数据
     */
    parentChange(val) {
      this.form.cate2_id = null;
      this.parentList.map(item =>
        item.id === val ? (this.liangChildList = item.sub_cates) : null
      );
    }
  }
};
</script>

<style></style>
